<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" ref="receivingInformation" label-width="140px">
      <div class="card-title-wrap">
        <span>收车信息</span>
        <span></span>
      </div>
      <div style="margin: 30px 0; border: 1px solid #ccc;box-sizing: border-box;padding: 10px;border-radius: 8px;" v-for="(item,i) in form.list" :key="i">
        <div :style="{marginLeft: (type == 'detail'?'':'0')}">
          <div style="display: flex;justify-content: space-between;align-items: center;width: 80%;">
            <el-form-item label="交付人:" prop="a">
              <span>{{ item.a }}</span>
            </el-form-item> <el-form-item label="交付时间:" prop="b">
              <span>{{ item.b }}</span>
            </el-form-item> <el-form-item label="提交人:" prop="c">
              <span>小A</span>
            </el-form-item>
          </div>
          <el-form-item label="说明:" prop="templateRemark">
            <span>{{ item.b }}</span>
          </el-form-item>
          <el-form-item label="附件:" prop="attachmentsC">
            <ImageCommon :up-type="2" info="选择附件" v-model="form.attachmentsC" disabled></ImageCommon>
          </el-form-item>
        </div>
        <el-table :data="item.formDataList" border>
          <el-table-column label="车牌号" align="center" prop="nickName" min-width="120px" show-overflow-tooltip />
          <el-table-column label="车架号" align="center" prop="dept.CJH" min-width="120px" show-overflow-tooltip />
          <el-table-column label="品牌/车型/车款" align="center" prop="a" min-width="210px" show-overflow-tooltip />
          <el-table-column label="车辆归属" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
          <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出租方" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
          <el-table-column label="业务类型" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
          <el-table-column label="订单提交人" align="center" prop="createTime" min-width="120px" show-overflow-tooltip />
          <el-table-column label="GPS状态" align="center" prop="createTime" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-if="type !=='detail'" v-model="scope.row.GPS" placeholder="请选择">
                <el-option v-for="item in GPSlist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <dict-tag v-if="type == 'detail'" :options="GPSlist" :value="scope.row.GPS" />
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnFWF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="服务费" align="center" prop="FWF" min-width="120px" show-overflow-tooltip />
          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnGLS" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="公里数" align="center" prop="GLS" min-width="120px" show-overflow-tooltip />

          <el-table-column v-if="type =='detail'" label="公里数" align="center" prop="GLS" min-width="120px" show-overflow-tooltip />
          <el-table-column label="运输费单价(元/公里/台)" align="center" prop="DJ" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.DJ) }}</span>
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnYSF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="运输费" align="center" prop="YSF" min-width="120px" show-overflow-tooltip />
          <TableCloumn v-if="type !=='detail'" v-for="item  in tableCloumnTT" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="仓储天数" align="center" prop="TT" min-width="120px" show-overflow-tooltip />

          <el-table-column label="仓储费单价(元/天/台)" align="center" prop="DJC" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.DJC) }}</span>
            </template>
          </el-table-column>

          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnCCF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="仓储费" align="center" prop="CCF" min-width="120px" show-overflow-tooltip />
          <TableCloumn v-if="type !=='detail'" v-for="item in tableCloumnQTF" :cellOptions="item" minWidth="150px" />
          <el-table-column v-if="type =='detail'" label="其他费用" align="center" prop="QTF" min-width="120px" show-overflow-tooltip />

          <el-table-column label="总费用(元)" align="center" prop="ZFY" min-width="150PX" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.ZFY) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="收车地址" align="center" prop="SCD" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-if="type !=='detail'" v-model="scope.row.SCD" placeholder="请输入收车地址" />
              <span v-if="type =='detail'">{{ scope.row.SCD }}</span>
            </template>
          </el-table-column>

          <el-table-column label="送车地址" align="center" prop="SCZ" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-if="type !=='detail'" v-model="scope.row.SCZ" placeholder="请输入送车地址" />
              <span v-if="type =='detail'">{{ scope.row.SCZ }}</span>
            </template>
          </el-table-column>
          <el-table-column label="付款进度" align="center" prop="FKJ" min-width="100px" show-overflow-tooltip />
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";

export default {
  // 收车信息
  name: 'receivingInformation',
  components: {
    SearchContent,
    TableCloumn
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    tableCloumnCCF() {
      return [
        {
          label: "仓储费",
          prop: "CCF",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    tableCloumnYSF() {
      return [
        {
          label: "运输费",
          prop: "YSF",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    tableCloumnQTF() {
      return [
        {
          label: "其他费用",
          prop: "QTF",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    tableCloumnFWF() {
      return [
        {
          label: "服务费",
          prop: "FWF",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    tableCloumnGLS() {
      return [
        {
          label: "公里数",
          prop: "GLS",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            this.$set(row, 'YSF', row.GLS * row.DJ)
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    tableCloumnTT() {
      return [
        {
          label: "仓储天数",
          prop: "TS",
          type: "input",
          width: "150px",
          watch: ({ val, row }) => {
            this.$set(row, 'CCF', row.TS * row.DJC)
            if (row.YSF && row.CCF && row.FWF && row.QTF) {
              this.$set(row, 'ZFY', Number(row.YSF) + Number(row.CCF) + Number(row.FWF) + Number(row.QTF))
            }
          },
        }]
    },
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      GPSlist: [
        {
          label: '正常',
          value: '1'
        },
        {
          label: '异常',
          value: '2'
        }
      ],
      rules: {
        templateRemark: [
          {
            required: true,
            message: '请输入说明',
            trigger: 'change',
          },
        ]
      },
    };
  },
  created() {

  },
  methods: {
    /**
 *额度跳转
 */
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    /**
 *订单详情
 */
    orderDetail(row) {
      this._toPage({
        name: "SuborderDetail",
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
